﻿@model WebExtras.JQPlot.JQPlotChartBase[]

<div class="well ui-well">
  <h4>X axis values as text</h4>
  <pre><code>
    object[][] data = new object[][] { 
      new object[] { "Cup Holder Pinion Bob", 7 },
      new object[] { "Generic Fog Lamp", 9 },
      new object[] { "HDTV Receiver", 15 },
      new object[] { "8 Track Control Module", 12 },
      new object[] { "Sludge Pump Fourier Modulator", 3 },
      new object[] { "Transcender/Spice Rack", 6 },
      new object[] { "Hair Spray Danger Indicator", 18 }
    };
  </code></pre>
</div>


<div class="well ui-well">
  <h4>Modified plot options</h4>
  <pre><code>
  JQPlotOptions options = new JQPlotOptions
  {
    title = new TitleOptions("Concern vs Occurance"),
    axesDefaults = new JQPlot.SubOptions.AxisOptions
    {
      tickRenderer = EJQPlotRenderer.CanvasAxisTickRenderer,
      tickOptions = new Dictionary&lt;string, object&gt; {
        <span class="comment">// Specifies the tilt angle for axis ticks at -30&deg;</span> 
        { "angle", -30 }                                  
      }
    },
    axes = new JQPlotAxes
    {
      xaxis = new JQPlot.SubOptions.AxisOptions { renderer = EJQPlotRenderer.CategoryAxisRenderer },
      yaxis = new JQPlot.SubOptions.AxisOptions
      {
        tickOptions = new Dictionary&lt;string, object&gt; { 
          <span class="comment">// Explicitly overrides and resets the tilt angle for Y axis ticks to 0&deg;</span>
          { "angle", 0 }                                  
        }
      }
    }
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Setting up the plot object</h4>
  <pre><code>
  <span class="comment">// Note that we are instantiating a <span class="highlight">JQPlotChartBase</span> object and NOT a <span class="highlight">JQPlotChart</span> object</span>
  <span class="comment">// This allows us to create a multi datatype data array</span>
  JQPlotChartBase chart = new JQPlotChartBase
  {
    chartData = new List&lt;object[][]&gt; { data },
    chartOptions = options
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>And the output is...</h4>
  <div class="content">
    <div id="non-numeric-axis-values-graph" class="graph graph-large">
    </div>
    Required Plugins:<br />
    <ul>
      <li>jqplot.canvasTextRenderer.min.js</li>
      <li>jqplot.canvasAxisTickRenderer.min.js</li>
      <li>jqplot.categoryAxisRenderer.min.js</li>
    </ul>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {

      $.jqplot('non-numeric-axis-values-graph', @Html.Raw(Model[0].chartData.ToJson()), @Html.Raw(Model[0].chartOptions.ToString()));
    });
  </script>
</div>

<div class="well ui-well">
  <h4>You could also have data as a date time series...</h4>
  <pre><code>
    object[][] data = new object[][] { 
      new object[] { "01-Jan-2014", 75 },
      new object[] { "01-Feb-2014", 91 },
      new object[] { "27-Jun-2014", 150 },
      new object[] { "17-July-2014", 112 },
      new object[] { "22-Sep-2014", 37 },
      new object[] { "08-Nov-2014", 66 },
      new object[] { "11-Dec-2014", 18 }
    };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Then your options would look something like these</h4>
  <pre><code>
  JQPlotOptions options = new JQPlotOptions
  {
    title = new TitleOptions("Date Data Rendering"),
    axes = new JQPlotAxes
    {
      xaxis = new JQPlot.SubOptions.AxisOptions
      {
        <span class="comment">// Note how we tell jqPlot that our X axis values are actually dates</span>
        renderer = <span class="highlight">EJQPlotRenderer.DateAxisRenderer</span>,     
        tickOptions = new AxisTickRendererOptions
        {
          formatString = "%b&nbsp;%#d"
        },
        min = "25-Dec-2013"
      }
    }
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>And finally the output...</h4>
  <div class="content">
    <div id="date-graph" class="graph">
    </div>
    <br />
    Required Plugins:<br />
    <ul>
      <li>jqplot.dateAxisRenderer.min.js</li>
    </ul>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {

      $.jqplot('date-graph', @Html.Raw(Model[1].chartData.ToJson()), @Html.Raw(Model[1].chartOptions.ToString()));
    });
  </script>
</div>
